<template>
	<view>
			<view class="scrollView">
				<view class="top">
					<tui-tabs
						:tabs="tabs"
						:height="88"
						@confirm="confirm"
						:currentTab="currentTab"
						:sliderWidth="150"
						:sliderHeight="60"
						bottom="50%"
						color="#888"
						selectedColor="#fff"
						sliderBgColor="#5FDB7E"
						@change="changeTab"
					></tui-tabs>
				</view>
				<view class="list-view">
					<view class="list-item" v-for="(item, index) in list" :key="index" hover-class="hover" :hover-stay-time="150" bindtap="detail">
						<view class="content-box">
							<view class="des-box">
								<view class="tit">{{ item.logName }}</view>
								
								<view class="time">{{ item.ctrateTime }}</view>
							</view>
						</view>
						<view class="money" :class="{ less: item.state==1 }">{{ item.state==0 ? '-' : '+' }}{{ item.money }}</view>
					</view>
				</view>
				<view class="tip">仅显示近半年内的资金记录</view>
			</view>
	</view>
</template>

<script>
import tuiTabs from '@/components/tui-tabs/tui-tabs';
import { mapState, mapMutations, mapGetters } from 'vuex';
export default {
	components: {
		tuiTabs
	},
	computed: {
		...mapGetters(['hasLogin'])
	},
	data() {
		return {
			list: [],
			date: 'incomeMonth',
			currentTab: 0,
			indexArr: '',
			query: {
				tabs: '',
			},
			query: {
			  current: 1,
			  number: 10,
			  state: 99,
			},
			
			tabs: [
				{
					name: '全部记录',
					id:99
				},
				{
					name: '支出',
					id:0
				},
				{
					name: '收益',
					id:1
				},
				{
					name: '提现',
					id:2
				}
			]
		};
	},
	onLoad() {
		this.loadData();
	},
	onPullDownRefresh() {
		this.loadData();
	  this.query.current = 1;
	},
	methods: {
		
		async loadData() {
				if (type == 'refresh') {
				  this.query.current = 1;
				} else {
				  this.query.current++;
				}
				
			this.list = await this.$apis.getMoneyLog(this.query);
			
		},
		
		async changeTab(e) {
			this.currentTab = e.index;
			this.list = [];
			
			this.query.state=this.tabs[e.index].id;
			
			// if (this.currentTab == 3) {
				
			// } else if (this.currentTab == 0) {
				
			// } else if (this.currentTab == 1) {
				
			// } else if (this.currentTab == 2) {
				
			// }
			
			this.list = await this.$apis.getMoneyLog(this.query);
			
			
		}
	},
	onPullDownRefresh() {
		this.loadData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.flexView {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	.scrollView {
		width: 100%;
		height: 100%;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
		padding-bottom: 116rpx;
		.white-box {
			width: 94%;
			background: white;
			border-radius: 10rpx;
			margin: -120rpx auto 20rpx;
			box-shadow: 0 6rpx 20rpx #e7e7e7;
			}
	}
}
.list-view {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.list-item {
	width: 100%;
	padding: 30rpx 28rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 1rpx solid #eaeef1;
}

.item-last::after {
	left: 0 !important;
}

.content-box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.des-box {
	min-height: 80rpx;
	padding-left: 28rpx;
	box-sizing: border-box;
	vertical-align: top;
	color: #333;
	font-size: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tit {
	font-size: 32rpx;
	max-width: 420rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.source {
	margin: 12rpx 0;
}
.time {
	color: #888;
}
.tip {
	margin-top: 50rpx;
	display: flex;
	justify-content: center;
	align-content: center;
	font-size: 24rpx;
	color: #888;
}
</style>
